<style lang='scss' scoped>
	$line_color: rgb(84, 92, 100);
	.department-contain {
		margin: 0 6%;
		display: flex;
		flex-direction: column;
		.department-item {
			display: flex;
			padding-top: 20px;
			position: relative;
			.department:not(.add-btn) {
				width: 100px;
				overflow-x: hidden;
				text-overflow: ellipsis;
				flex-shrink: 0;
			}
			&::before {
				position: absolute;
				left: -20px;
				top: 50px;
				display: block;
				content: "";
				background-color: $line_color;
				width: 20px;
				height: 1px;
			}
			&:not(.add-btn)::after {
				position: absolute;
				left: -20px;
				top: 50px;
				display: block;
				content: "";
				background-color: $line_color;
				width: 1px;
				height: 100%;
			}
		}
	}
	.job-frame {
		margin-top: 10px;
	}
	.jobs-contain {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20px;
		.job-frame {
			margin-left: 6px;
		}
	}
</style>
<template>
	<div>
		<div class="department-contain">
			<div v-for="department in departments" :key="department.id" class="department-item">
				<jobFrame @reqReload="getDepartments" class="department" :id="department.id" :name="department.name"></jobFrame>
				<div class="jobs-contain">
					<jobFrame @reqReload="getDepartments" :parent_id="department.id" v-for="job in department.jobs" :key="job.id" :id="job.id" :name="job.name"></jobFrame>
					<jobFrame @reqReload="getDepartments" :parent_id="department.id"></jobFrame>
				</div>
			</div>
			<div class="department-item add-btn">
				<jobFrame @reqReload="getDepartments" class="department add-btn"></jobFrame>
			</div>
		</div>
	</div>
</template>
<script>
	import jobFrame from 'components/admin/job_frame.vue';
	export default {
		data() {
			return {
				departments: []
			}
		},
		created() {
			this.getDepartments();
		},
		methods: {
			getDepartments() {
				this.departments = [];
				this.$axios.get('/admin/getDepartment').then(res => {
					if(res.s == 1) {
						this.departments = res.d;
					}
				})
			}
		},
		components: {
			jobFrame
		}
	}
</script>